<!DOCTYPE html>
<html>
<head>
  <title>Piano demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1.0, minimum-scale=1.0, maximum-scale=1.0">
  <link rel="stylesheet" type="text/css" href="./css/animate.css">
  <link rel="stylesheet" type="text/css" href="./css/piano.css">
  <link rel="icon" type="image/png" href="./img/piano-icon.png" />
  <link rel="stylesheet" type="text/css" href="./css/base.css"/>
</head>
<body>
  <div class="piano-header">
    <img src="./img/piano-icon.png" alt="logo">
    <h1> ⌨ Piano.js demo</h1>

  </div>
  <div class="desc">
    <p>Piano Js is Customizable virtual keyboard written in pure JavaScript. Piano js is browser friendly, common JS and Es6 friendly so can just import it, rquire it, or use script tag to use it. Piano js comes with differents layout you can check it here, or build your own ! </br>
    You can find all the doc on the git repo: <a href="https://github.com/soixantecircuits/piano">https://github.com/soixantecircuits/piano </a> </br>
    js-standard-style Join the chat at <a href="https://gitter.im/soixantecircuits/piano">https://gitter.im/soixantecircuits/piano</a>
    </p>
  </div>
  <div class="demo-container">
    <h3 for="input-1">Default layout</h3>
    <p class="attrDesc"> data-piano-layout="azerty" </br> data-piano-scale="1"</p>
    <input type="text" placeholder="Click Me !" name="input-1" id="input-1" data-piano data-piano-layout="azerty" data-piano-scale="1" />
    <h3 for="input-2">Email layout</h3>
    <p class="attrDesc"> data-piano-layout="azerty-mail" </br> data-piano-scale="1"</p>
    <input type="text" placeholder="Click Me !" name="input-2" id="input-2" data-piano data-piano-layout="azerty-mail" data-piano-scale="1" />
    <h3 for="input-3">Right top positionned default layout</h3>
    <p class="attrDesc"> data-piano-layout="azerty" </br> data-piano-scale="1.5" </br> data-piano-position="right, top"</p>
    <input type="text" placeholder="Click Me !" name="input-3" id="input-3" data-piano data-piano-layout="azerty" data-piano-scale="1.5" data-piano-position="right, top" />
    <h3 for="input-4">Center middle positionned azerty layout</h3>
    <p class="attrDesc">  data-piano-layout="azerty" </br> data-piano-event-id="input-2" </br> data-piano-position="center, middle"</p>
    <input type="text" placeholder="Click Me !" name="input-4" id="input-4" data-piano data-piano-layout="azerty" data-piano-event-id="input-2" data-piano-position="center, middle"/>
    <h3 for="input-5">Absolute 150 - 150 positionned azerty layout</h3>
    <p class="attrDesc"> data-piano-layout="azerty" </br> data-piano-animation-in="bounceInUp" </br> data-piano-animation-out="fadeOutUp" </br> data-piano-position="absolute, 150, 20"</p>
    <input type="text" placeholder="Click Me !" name="input-5" id="input-5" data-piano data-piano-layout="azerty" data-piano-animation-in="bounceInUp" data-piano-animation-out="fadeOutUp" data-piano-position="absolute, -150, 20"/>
    <h3 for="textarea">Textarea element</h3>
    <p class="attrDesc"> data-piano-layout="azerty" </br> data-piano-scale="1"</p>
    <textarea name="textarea" rows="8" cols="40" data-piano data-piano-layout="azerty" data-piano-scale="1"></textarea>
    <h3 for="textarea">Dynamic trigger</h3>
    <textarea name="textarea" rows="8" cols="40" id="dynamic-piano"></textarea>
  </div>
  <script src='./dist/piano.js'></script>
  <script src='./dist/index.js'></script>
</body>
</html>
